/* eslint-disable no-param-reassign */
<template>
  <el-container class="default-box">
    <!-- 左侧的导航 -->
    <el-menu
      v-if="isShowLeftMenu"
      :collapse="collapse"
      class="aside-menu"
      :default-active="appPathName"
      background-color="#2A4EA1"
      text-color="#ecf1ff"
      active-text-color="#fff"
      @select="menuSelect"
    >
      <div class="logo">
        <div
          v-if="
            structureLogo &&
              structureLogo !== 'null' &&
              structureLogo !== 'undefined'
          "
          class="logo-text logo-img"
        >
          <img :src="structureLogo" alt="logo" />
        </div>
        <div v-else class="logo-text">
          <img class="default-logo" :src="defaultLogo" alt="" />
        </div>
      </div>
      <div class="menuList-box">
        <menu-item
          v-if="menuList[topNavIndex]"
          :menu-list="
            menuListTopNav.length ? menuListTopNav[topNavIndex].children : []
          "
          @handleCollapse="handleCollapse"
        />
      </div>
      <div class="menuList-flag" @click.stop="collapse = !collapse">
        <icon-font
          icon="iconpc-menu_ss1x"
          :class="{ active: collapse }"
          class="icon-collapse"
        />
      </div>
    </el-menu>
    <!-- 右侧的功能 -->
    <el-container class="main-container">
      <!-- 顶部信息和一级导航 -->
      <el-header height="50px" class="nav-box-header">
        <!-- 一级导航 -->
        <el-row
          type="flex"
          justify="space-between"
          align="middle"
          style="padding-right: 16px"
        >
          <el-col :span="18" style="display: flex">
            <ul
              class="header-tab"
              :style="{ width: topNavWidth === '0px' ? 'auto' : topNavWidth }"
            >
              <li
                v-for="(item, index) in menuListTopNav"
                :key="index"
                class="tab-item"
                :class="{ active: topNavIndex === index }"
                @click.stop="changeActive(index)"
              >
                <span class="item-font">{{
                  item.resourceName | sliceMenuName
                }}</span>
              </li>
            </ul>
            <div v-if="slideBtn" class="slideBtn">
              <div
                @mouseover="slideBtnOver('left')"
                @mouseout="slideBtnOut('left')"
                @click="slideBtnLeft()"
              >
                <img :src="left" alt="left" />
              </div>
              <div
                @mouseover="slideBtnOver('right')"
                @mouseout="slideBtnOut('right')"
                @click="slideBtnRight()"
              >
                <img :src="right" alt="right" />
              </div>
            </div>
          </el-col>
          <!-- 用户部分信息 -->
          <el-col style="text-align: right" class="user-info">
            <!--七鱼客服 start-->
            <!-- <el-dropdown v-if="isMMallPC" placement="bottom">
              <div class="el-dropdown-link position">
                <el-avatar class="avatar-bg-pic" />
                <i class="el-icon-arrow-down el-icon--right" />
              </div>
              <el-dropdown-menu slot="dropdown">
                <div class="costomer-service">
                  <el-dropdown-item
                    v-for="(item, index) in customerServiceLists"
                    :key="index"
                    style="display:flex; flex-direction:column; text-align:right;"
                    @click.native="configYsf(item)"
                  >
                    <span>{{ item.customerTypeName || '' }}</span>
                  </el-dropdown-item>
                </div>
              </el-dropdown-menu>
            </el-dropdown> -->
            <!-- 历史记录 -->
            <el-dropdown
              v-if="isShowFileCenterMenu"
              placement="bottom-start"
              trigger="hover"
              @visible-change="getHistoryInformation()"
            >
              <div class="el-dropdown-link position">
                <m-iconfont
                  classify="taiermao"
                  size="22"
                  icon="iconxiazaimoren1x"
                />
              </div>
              <el-dropdown-menu slot="dropdown">
                <div v-if="uploaDownload.length > 0" class="history-content">
                  <el-dropdown-item
                    v-for="(item, index) in uploaDownload"
                    :key="index"
                    class="history-content-item"
                  >
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="item.fileOldName"
                      :disabled="showTitle"
                      placement="top"
                    >
                      <span
                        class="textLength"
                        @mouseover="onShowNameTipsMouseenter"
                        >{{ item.fileOldName }}</span
                      >
                    </el-tooltip>
                    <span
                      v-if="item.status === 'SAVESUCCESSFUL'"
                      style="color: #4d84ff"
                      @click="getClickDownload(item)"
                      >下载</span
                    >
                    <span v-else>{{ item.showStatus }}</span>
                  </el-dropdown-item>
                </div>
                <div v-else class="history-content-No-Data">暂无数据</div>
                <div class="history-content-bottom">
                  <el-button type="text" @click="getOpenHistory"
                    >查看历史记录</el-button
                  >
                </div>
              </el-dropdown-menu>
            </el-dropdown>
            <!--七鱼客服 end-->
            <el-dropdown v-if="positionList.length">
              <div class="el-dropdown-link position">
                <div class="positionInfo">
                  <span>{{
                    companyName === null || companyName === 'null'
                      ? ''
                      : companyName
                  }}</span>
                  <span>{{ positionName || '' }}</span>
                </div>
                <i
                  v-if="positionList.length"
                  class="el-icon-arrow-down el-icon--right"
                />
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(item, index) in positionList"
                  :key="index"
                  style="
                    display: flex;
                    flex-direction: column;
                    text-align: right;
                  "
                  @click.native="choosePosition(item.companyId)"
                >
                  <span>{{ item.companyName || '' }}</span>
                  <span>{{ item.positionName || '' }}</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown @command="handleDropdown">
              <span class="el-dropdown-link">
                {{ $store.state.userName || '数字化供应链生态平台' }}
                <i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="toSystemNav">
                  返回导航页面
                </el-dropdown-item>
                <el-dropdown-item command="editPassword"
                  >修改密码</el-dropdown-item
                >
                <el-dropdown-item command="logout"> 退出 </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <!-- 面包屑，目前固定在顶部，提供右侧按钮 -->
      <el-header v-if="isShowBreadcrumb" class="nav-breadcrumb" height="40px">
        <el-row
          type="flex"
          justify="space-between"
          align="middle"
          style="height: 40px; overflow: hidden"
        >
          <el-col :span="12" class="breadcrumb-content">
            <!-- 面包屑 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item
                v-for="(item, index) in activeNameArr"
                :key="index"
                :class="{
                  lastItem:
                    index === activeNameArr.length - 1 &&
                    activeNameArr.length > 1
                }"
              >
                {{ item | sliceMenuName }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
          <el-col
            :span="12"
            type="flex"
            align="right"
            style="height: 40px; overflow: hidden"
          >
            <div
              v-if="
                layoutHandle &&
                  layoutHandle.type === 'btn' &&
                  layoutHandle.arr.length
              "
            >
              <el-button
                v-for="(itm, idx) in layoutHandle.arr"
                :key="idx"
                :type="itm.type"
                :icon="itm.icon"
                size="mini"
                :disabled="itm.disabled"
                @click.stop="loyoutBtnHandle(itm.handle, idx)"
              >
                {{ itm.val }}
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <!-- 面包屑，目前固定在顶部，提供右侧按钮 -->
      <el-header
        v-if="isShowTab"
        height="40px"
        style="padding: 0 0 0 0; box-shadow: none"
      >
        <el-row
          type="flex"
          justify="space-between"
          align="middle"
          style="height: 100%"
        >
          <el-col :span="24" class="tab-content" style="height: 100%">
            <m-tabs-nav
              :tab-list="tabList"
              :configure="tabStyleData"
              @click="clickTab"
              @remove-tab="removeTab"
              @update-tab="updateTab"
              @close-other-tab="closeOtherTab"
              @close-all-tab="closeAllTab"
            >
            </m-tabs-nav>
          </el-col>
        </el-row>
      </el-header>
      <!-- 内容部分 -->
      <el-main class="nuxt-main">
        <!-- <div v-show="!isDeepPage" class="nuxt-content">
          <nuxt keep-alive />
        </div>
        <div v-if="isDeepPage" class="nuxt-content">
          <nuxt />
        </div> -->
        <div v-if="isRouterAlive" class="nuxt-content">
          <nuxt />
        </div>
        <!-- <copyright/> -->
      </el-main>
    </el-container>
    <!-- 查看历史记录dialog页面组件 -->
    <upLoad ref="upLoad"></upLoad>
    <!--七鱼客服 start-->
    <Drag :site="{ right: 50, bottom: 100 }">
      <div
        v-if="isMMallPC"
        class="service-box"
        @mouseenter="mouseover"
        @mouseleave="mouseLeave"
      >
        <div class="el-dropdown-link position">
          <el-avatar class="service-bg-pic" />
          <div class="service-text-pad">在线客服</div>
        </div>
        <div
          v-show="dropdownListBool"
          ref="dropdownlist"
          class="dropdown-list"
          :style="
            `transform: translate(${-dropdownListskewing +
              -4}px);opacity: ${dropdownListshow}`
          "
        >
          <div class="triangle-box"></div>
          <div v-if="!dropdownBool" class="dropdown-list-main">
            <p
              v-for="(item, index) in customerServiceLists"
              :key="index"
              @click="configYsf(item)"
            >
              <span>{{ item.customerTypeName || '' }}</span>
            </p>
          </div>
          <div
            v-if="dropdownBool"
            class="dropdown-list-mains"
            :style="`width: ${dropdownBool * 110 + dropdownBool * 30}px;`"
          >
            <p
              v-for="(item, index) in customerServiceLists"
              :key="index"
              class="dropdown-list-mains-p"
              @click="configYsf(item)"
              @mouseenter.stop="mouseoverList"
              @mouseleave.stop="mouseLeaveList"
            >
              <el-tooltip
                v-if="dropdownTextBool"
                class="item"
                effect="dark"
                :content="item.customerTypeName"
                placement="top"
              >
                <span>{{ item.customerTypeName || '' }}</span>
              </el-tooltip>
              <span v-else>{{ item.customerTypeName || '' }}</span>
            </p>
          </div>
        </div>
      </div>
    </Drag>
    <m-fnc-edit-phone-pwd
      :visible="phoneDialogVisible"
      @close-dialog-visible="onClosePhoneDialogCb"
    />
  </el-container>
</template>

<script>
import { mapState } from 'vuex';
import { sliceMenuName } from '@const/filter.js';
import MenuItem from '@components/menu-item.vue';
// import { Scrollbar } from 'element-ui';
import MFncEditPhonePwd from '@pc/m-fnc-components/m-fnc-edit-phone-pwd';
import { cloneDeep, debounce } from 'lodash';
import { routerHandle } from '@const/routerHandle';
import auth from '@mixins/auth';
import cookie from 'js-cookie';
import { apiInit } from '@services/api';
import { getFileInfoList } from '@const/fileLibraryApi';
import { customerServiceList } from '@api/m_mall_web_v1';
import upLoad from '@components/historical-information';
import { $loadFileSimply } from '@const/loadFileOps';
import { fileDownload } from '@const/utils';
import mIconfont from '@pc/m-components/m-iconfont';
import Drag from '@components/drag';
import MTabsNav from '@pc/m-components/m-tabs-nav';

export default {
  filters: { sliceMenuName },
  components: {
    MenuItem,
    // ElScrollbar: Scrollbar,
    MTabsNav,
    upLoad,
    mIconfont,
    Drag,
    MFncEditPhonePwd
  },
  mixins: [auth],
  provide() {
    return { ...apiInit(this.$axios), reload: this.reload };
  },
  data() {
    return {
      tabName: '',
      isRouterAlive: true,
      collapse: false,
      dropdownBool: null,
      phoneDialogVisible: false,
      customerServiceLists: [], // 客服组列表
      uploaAndDownload: [], // 历史记录弹框数据
      uploaDownload: [], // 历史记录hover数据
      merchantId: this.$store.state.MID,
      companyId: this.$store.state.companyId,
      dialogVisible: false,
      showTitle: true,
      dropdownList: [
        {
          title: '退出',
          command: 'exit'
        }
      ],
      positionInfo: '',
      positionListInfo: '',
      // eslint-disable-next-line global-require
      defaultLogo: require('../assets/img/pc-neiye-logo.png'),
      structureLogo: cookie.get('structureLogo'),
      slideBtn: false,
      topNavWidth: '100%',
      // eslint-disable-next-line global-require
      right: require('@assets/img/right_y.png'),
      // eslint-disable-next-line global-require
      left: require('@assets/img/left_y.png'),
      isNavClick: false,
      dropdownListBool: false,
      dropdownListskewing: 0,
      dropdownListshow: 0,
      dropdownTextBool: null
    };
  },
  computed: {
    ...mapState([
      'menuList',
      'menuListTopNav',
      'isDeepPage',
      'activeIndex',
      'topNavIndex',
      'appName',
      'appPathName',
      'activeNameArr',
      'positionList',
      'companyName',
      'positionCompanyName',
      'positionName',
      'positionId'
    ]),
    ...mapState({
      isShowTab: state => state.tab && state.tab.isShowTab,
      tabStyleData: state => state.tab && state.tab.tabStyleData,
      tabList: state => state.tab && state.tab.tabList
    }),
    isShowBreadcrumb() {
      return !(
        window.location.pathname.includes('/m-perfeval-pc/') ||
        window.location.port.includes('3015')
      );
    },
    // 判断是否是m-mall-pc子系统
    isMMallPC() {
      return (
        window.location.pathname.includes('/m-mall-pc/') ||
        window.location.port.includes('3010')
      );
    },
    // 判断是否是m-perfeval-pc子系统
    isShowFileCenterMenu() {
      return (
        window.location.pathname.includes('/m-perfeval-pc/') ||
        window.location.port.includes('3015')
      );
    },
    isShowLeftMenu() {
      return this.$store.state.isShowLeftMenu;
    },
    showCompanyCode() {
      const { companyCode } = this.$store.state;
      return companyCode && companyCode !== 'null';
    },
    // 计算多个公司的展示
    customCompanyName() {
      return this.$store.state.companyName !== 'null'
        ? this.$store.state.companyName || '平台管理员'
        : '平台管理员';
    },
    // 全局深层页面添加返回按钮，去重返回按钮
    layoutHandle() {
      const handleObj = this.$store.state.layoutHandle;
      const goBack = {
        type: '',
        icon: 'el-icon-arrow-left',
        val: '返回',
        handle: () => this.$router.go(-1)
      };
      if (handleObj.arr) {
        // 深拷贝，防止改变state
        const cloneDeepHandleObj = cloneDeep(handleObj);
        const nameArr = ['返回'];
        const iconArr = {
          default: '',
          primary: 'el-icon-edit',
          success: 'el-icon-check',
          info: 'el-icon-message',
          warning: 'el-icon-star-off',
          danger: 'el-icon-delete'
        };
        // 判断是否已有
        let hasInArr = false;
        cloneDeepHandleObj.arr.forEach(item => {
          // 判断是否需要插入
          if (nameArr.includes(item.val) || item.noReturn) hasInArr = true;
          if (nameArr.includes(item.val)) {
            // eslint-disable-next-line no-param-reassign
            item.icon = 'el-icon-arrow-left';
          } else if (!item.icon) {
            // 根据按钮的类型，统一设置右上角按钮icon
            // eslint-disable-next-line no-param-reassign
            item.icon = iconArr[item.type];
          }
        });
        // 无则添加
        // eslint-disable-next-line no-unused-expressions
        !hasInArr && this.isDeepPage && cloneDeepHandleObj.arr.unshift(goBack);
        return cloneDeepHandleObj;
      }
      if (this.isDeepPage) {
        return { type: 'btn', arr: [goBack] };
      }
      return {};
    }
  },
  watch: {
    // eslint-disable-next-line func-names
    '$store.state.tab.currentPath': function(tab) {
      this.tabName = tab.pathname;
      this.$router.push(tab.pathname);
    },
    positionList: {
      handler(val) {
        this.positionListInfo = val;
        this.positionInfo = this.positionTitle;
      },
      deep: true
    },
    activeIndex() {
      // 监听vuex中activeIndex值
      if (!this.isNavClick) {
        this.topNavData();
      }
    }
  },
  created() {
    this.$store.dispatch('getPositionList');
    // 因为要在“初次登录的个人页获取默认菜单”，故，此处判断是否已经存在菜单后再决定是否调用
    if (!this.$route.query.basic) {
      this.$store.dispatch('fetchUserAndMenuList').then(() => {
        this.topNav();
        this.$store.commit('setAppPathName', {
          url1: `/#${this.$route.fullPath}`
        });
      });
    } else {
      this.$store
        .dispatch('fetchDefaultMenuList', this.$route.query.defaulttype)
        .then(() => {
          this.topNav();
          this.$store.commit('setAppPathName', {
            url1: `/#${this.$route.fullPath}`
          });
        });
    }
    const json = localStorage.getItem('testKey');
    const userCustomTableHeader = json && JSON.parse(json);
    this.$store.commit('tableHeadConfig', { json: userCustomTableHeader });
    // eslint-disable-next-line no-extend-native
    Array.prototype.flat = count => {
      let c = count || 1;
      const len = this.length;
      let exe = [];
      if (this.length === 0) return this;
      // eslint-disable-next-line no-plusplus
      while (c--) {
        // eslint-disable-next-line no-underscore-dangle
        const _arr = [];
        let flag = false;
        if (exe.length === 0) {
          flag = true;
          for (let i = 0; i < len; i += 1) {
            if (this[i] instanceof Array) {
              exe.push(...this[i]);
            } else {
              exe.push(this[i]);
            }
          }
        } else {
          for (let i = 0; i < exe.length; i += 1) {
            if (exe[i] instanceof Array) {
              flag = true;
              _arr.push(...exe[i]);
            } else {
              _arr.push(exe[i]);
            }
          }
          exe = _arr;
        }
        if (!flag && c === Infinity) {
          break;
        }
      }
      return exe;
    };
    if (!this.isMMallPC) return;
    this.loadysfJs();
    this.getCustomerServiceList();
  },
  mounted() {
    this.topNavData = debounce(this.topNav, 0);
    this.$store.commit('changeTopNavIndex', this.activeIndex);
    window.onresize = () => {
      this.topNavData();
    };
  },
  methods: {
    /**
     * tab相关操作
     * removeTab--删除选中tab页签
     * clickTab--切换tab页签
     * closeOtherTab--关闭其他页签
     * updateTab--刷新页面
     * closeAllTab--关闭所有tab页签
     */
    closeOtherTab(e) {
      // console.log(e, this.tabList)
      this.$store.dispatch('tab/deleteOther', e);
    },
    updateTab() {
      // console.log(e, 'e')
      this.reload();
    },
    removeTab(e) {
      this.$store.dispatch('tab/deleteOne', e);
    },
    clickTab(e) {
      this.$store.dispatch('tab/updateOne', e);
    },
    closeAllTab() {
      this.$store.dispatch('tab/deleteAll');
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    },
    // 加载七鱼客服js 引入实例
    loadysfJs() {
      (function x(w, d, n, a, j) {
        const ww = w;
        ww[n] =
          ww[n] ||
          function y() {
            // eslint-disable-next-line prefer-rest-params
            const yy = (ww[n].a = ww[n].a || []).push(arguments);
            return yy;
          };
        // eslint-disable-next-line no-param-reassign
        j = d.createElement('script');
        // eslint-disable-next-line no-param-reassign
        j.async = true;
        // eslint-disable-next-line no-param-reassign
        j.src =
          'https://qiyukf.com/script/44ff0e4f3461b17139b63667328c7c99.js?hidden=1';
        d.body.appendChild(j);
      })(window, document, 'ysf');
    },
    onClosePhoneDialogCb(isClose) {
      this.phoneDialogVisible = isClose;
    },
    // 获取 查询客服组列表
    getCustomerServiceList() {
      this.$axios.post(customerServiceList, {}).then(res => {
        this.customerServiceLists = res.data.payload || [];
        if (this.customerServiceLists && this.customerServiceLists.length > 3) {
          this.dropdownBool = Math.ceil(this.customerServiceLists.length / 3);
        } else {
          this.dropdownBool = 0;
        }
      });
    },
    // 配置七鱼客服插件
    configYsf(row = {}) {
      // eslint-disable-next-line no-undef
      ysf('config', {
        uid: row.uid, // 客服ID
        name: row.companyName, // 经销商名称
        groupid: row.customerTeamId, // 分组ID，值来源于七鱼系统，在电商分配给客服
        qtype: row.topicId, // 热点话题ID，值来源于七鱼系统，在电商分配给客服
        robotShuntSwitch: 1, // 机器人优先开关
        staffid: row.customerAppoint, // 指定客服id，值来源于七鱼系统，在电商分配给经销商
        data: JSON.stringify([
          { index: 0, key: 'name', label: '用户名', value: row.userName },
          { index: 1, key: 'cusNo', label: '经销商', value: row.companyName },
          {
            index: 2,
            key: 'supName',
            label: '原厂',
            value: row.originalFactoryName
          },
          {
            index: 3,
            key: 'type',
            label: '访问类型',
            value: row.customerTypeName
          },
          { index: 4, key: 'source', label: '来源', value: '电商平台' }
        ]),
        success: () => {
          // eslint-disable-next-line no-undef
          ysf('open');
        },
        error: () => {
          // handle error
        }
      });
    },
    topNav() {
      const w1 =
        document.getElementsByClassName('el-header nav-box-header')[0]
          .offsetWidth / 2;
      const w2 =
        document.getElementsByClassName('header-tab')[0].offsetWidth + 30;
      const lw = document.getElementsByClassName('tab-item').length * 100;
      this.topNavWidth = w1 > lw ? `${lw}px` : `${w1}px`;
      if (w2 < w1) {
        this.slideBtn = false;
      } else {
        this.slideBtn = true;
      }
      if (this.topNavIndex === 0) {
        // eslint-disable-next-line global-require
        this.left = require('@assets/img/left_y.png');
        // eslint-disable-next-line global-require
        this.right = require('@assets/img/right_n.png');
      } else if (this.topNavIndex === this.menuListTopNav.length - 1) {
        // eslint-disable-next-line global-require
        this.left = require('@assets/img/left_n.png');
        // eslint-disable-next-line global-require
        this.right = require('@assets/img/right_y.png');
      }
      // 如果选中的菜单在靠右侧刷新后希望能看到选中状态
      if (this.slideBtn) {
        for (let i = 0; i < this.topNavIndex; i += 1) {
          this.slideBtnLeft();
          // eslint-disable-next-line global-require
          this.left = require('@assets/img/left_y.png');
          // eslint-disable-next-line global-require
          this.right = require('@assets/img/right_y.png');
        }
      }
    },
    slideBtnRight() {
      if (this.menuListTopNav[0].menuSort === 0) {
        // eslint-disable-next-line global-require
        this.left = require('@assets/img/left_n.png');
      } else {
        if (this.topNavIndex < 1) {
          // 到了最右侧继续循环
          this.$store.commit('changeTopNavIndex', this.menuListTopNav.length);
        }
        let cIndex = this.topNavIndex;
        this.$store.commit('changeTopNavIndex', (cIndex -= 1));
        const clist = cloneDeep(this.menuListTopNav);
        clist.push(clist[0]);
        clist.shift();
        this.$store.commit('changeMenuListTopNav', clist);
      }
    },
    slideBtnLeft() {
      if (this.menuListTopNav[this.menuListTopNav.length - 1].menuSort === 0) {
        // this.$message.success('顶部导航已到最右侧')
      } else {
        if (this.topNavIndex > this.menuListTopNav.length - 2) {
          // 到了最左侧继续循环
          this.$store.commit('changeTopNavIndex', -1);
        }
        let cIndex = this.topNavIndex;
        this.$store.commit('changeTopNavIndex', (cIndex += 1));
        const clist = cloneDeep(this.menuListTopNav);
        clist.splice(0, 0, clist[clist.length - 1]);
        clist.pop();
        this.$store.commit('changeMenuListTopNav', clist);
      }
    },
    slideBtnOver(type) {
      if (type === 'left') {
        // eslint-disable-next-line global-require
        this.left = require('@assets/img/left_n.png');
      } else {
        // eslint-disable-next-line global-require
        this.right = require('@assets/img/right_n.png');
      }
    },
    slideBtnOut(type) {
      if (type === 'left') {
        if (
          this.menuListTopNav[this.menuListTopNav.length - 1].menuSort === 0
        ) {
          // eslint-disable-next-line global-require
          this.left = require('@assets/img/left_n.png');
          // eslint-disable-next-line global-require
          this.right = require('@assets/img/right_y.png');
        } else {
          // eslint-disable-next-line global-require
          this.left = require('@assets/img/left_y.png');
          if (this.menuListTopNav[0].menuSort === 0) {
            // eslint-disable-next-line global-require
            this.right = require('@assets/img/right_n.png');
          } else {
            // eslint-disable-next-line global-require
            this.right = require('@assets/img/right_y.png');
          }
        }
      } else if (this.menuListTopNav[0].menuSort === 0) {
        // eslint-disable-next-line global-require
        this.left = require('@assets/img/left_y.png');
        // eslint-disable-next-line global-require
        this.right = require('@assets/img/right_n.png');
      } else {
        // eslint-disable-next-line global-require
        this.right = require('@assets/img/right_y.png');
        if (
          this.menuListTopNav[this.menuListTopNav.length - 1].menuSort === 0
        ) {
          // eslint-disable-next-line no-lone-blocks
          // eslint-disable-next-line global-require
          this.left = require('@assets/img/left_n.png');
        } else {
          // eslint-disable-next-line global-require
          this.left = require('@assets/img/left_y.png');
        }
      }
    },
    handleDropdown(command) {
      if (command === 'logout') {
        this.$store.commit(command);
        window.location.href = this.$store.state.toNavPage;
      } else if (command === 'editPassword') {
        this.phoneDialogVisible = true;
      } else if (this.$store.state.companyId === '0') {
        window.location.href = `${window.location.origin}/#/business`;
      } else {
        window.location.href = this.$store.state.toNavPage;
      }
    },
    handleCollapse() {
      this.collapse = !this.collapse;
    },
    // 去工作台
    toWorktable() {
      this.$router.push('/');
      this.$store.commit('changeActiveIndex', 0);
      this.$store.commit('changeTopNavIndex', 0);
    },
    // 右上角按钮事件
    loyoutBtnHandle(clickHandle) {
      clickHandle();
    },
    // 更改顶部选中系统的下表
    changeActive(index) {
      const { resourceName } = this.menuListTopNav[index];
      if (resourceName === '考试管理学生') {
        this.$store.commit('changeIsShowLeftMenu', false);
        this.$router.push({
          path: '/andiskExam/student'
        });
      } else if (resourceName === '考试管理教师') {
        this.$store.commit('changeIsShowLeftMenu', false);
        this.$router.push({
          path: '/andiskExam/teacher'
        });
      } else {
        this.$store.commit('changeIsShowLeftMenu', true);
      }
      // this.topNavIndex = index
      this.isNavClick = true;
      this.$store.commit('changeTopNavIndex', index);
      this.$store.commit('changeActiveIndex', index);
      // 调用路由方法，这里只需要面包屑的重新导航
      routerHandle(this.$route.path, this.$store, false);
    },
    menuSelect(index) {
      if (index) {
        // 兼容本地开发，线上地址只需要window.location.href
        const url = window.location.href;
        if (url.includes('https') && url.includes('.com')) {
          window.location.href = window.location.origin + index;
        } else if (index.includes('/#/')) {
          this.$router.push(index.substr(index.indexOf('/#/') + 2));
        } else {
          this.$router.push(index);
        }
      } else {
        this.$message({ type: 'warning', message: '该菜单没有配置地址！' });
      }
    },
    // 切换岗位
    // eslint-disable-next-line consistent-return
    choosePosition(val) {
      if (this.positionId === val) {
        this.$message.error('当前已是该岗位');
        return false;
      }
      const item = {
        positionId: val
      };
      this.$store.dispatch('choosePosition', { item });
    },
    // 文件中心上传下载的历史记录
    getHistoryInformation() {
      const params = {
        merchantId: this.merchantId,
        companyId: this.companyId
      };
      this.$axios.$post(getFileInfoList, params).then(res => {
        const urse = res.payload.content;
        this.uploaAndDownload = urse.map(item => item);
        this.uploaDownload = this.uploaAndDownload.splice(0, 3);
      });
    },
    // 打开历史记录弹框
    getOpenHistory() {
      this.$refs.upLoad.dialogVisible = true;
    },
    // 历史记录溢出位置添加Tooltip 文字提示
    onShowNameTipsMouseenter(e) {
      const { target } = e;
      const textLength = target.clientWidth;
      const containerLength = target.scrollWidth;
      if (textLength < containerLength) {
        // 溢出了
        this.showTitle = false;
      } else {
        this.showTitle = true;
      }
    },
    // 点击历史记录下载
    getClickDownload(item) {
      const params = {
        url: `/guoke-deepexi-file-library/api/v1/business/file/download?fileCode=${item.fileCode}`,
        method: 'get',
        timeout: 200000
      };
      $loadFileSimply(params).then(res => {
        fileDownload(res, item.fileOldName);
      });
    },
    mouseover() {
      if (this.customerServiceLists.length) {
        clearTimeout(this.dropdownListBool);

        this.dropdownListBool = setTimeout(() => {
          this.dropdownListBool = true;
          if (this.$refs.dropdownlist.scrollWidth) {
            this.dropdownListskewing = this.$refs.dropdownlist.scrollWidth;
          }
          clearTimeout(this.dropdownListshow);
          this.dropdownListshow = setTimeout(() => {
            this.dropdownListshow = 1;
          }, 150);
        }, 100);
      }
    },
    mouseLeave() {
      clearTimeout(this.dropdownListBool);
      this.dropdownListBool = setTimeout(() => {
        this.dropdownListBool = false;
      }, 150);
    },
    mouseoverList(e) {
      this.dropdownTextBool =
        e.srcElement.firstElementChild.offsetWidth * 1 > 110;
    },
    mouseLeaveList() {
      this.dropdownTextBool = false;
    }
  }
};
</script>

<style lang="less">
@import '~@assets/var.less';
@submenu-bg: #000c17;
@primary-color: #4d84ff;
@cutOffRuleColor: #e6e6e6;
// antd menu 高度
@menu-height: 50px;
// 头部的高度
@header-height: 50px;
@themeBlueWeight: #31405a;

.costomer-service {
  max-height: 180px;
  overflow: auto;
}
.history-content {
  width: 378px;
  height: 107px;
  .history-content-item {
    width: 338px;
    display: flex;
    flex-direction: row;
    text-align: right;
    justify-content: space-between;
    .textLength {
      max-width: 250px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
.history-content-No-Data {
  width: 378px;
  height: 107px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999999;
  font-size: 14px;
}
.history-content-bottom {
  margin-left: 40%;
  .el-button {
    padding: 0;
    color: #999999;
    font-size: 12px;
    line-height: 17px;
  }
}
.ysf-online-invite {
  display: none;
}

input[type='password'] {
  -webkit-text-security: disc !important;
}

.full-page {
  width: 1200px;
  margin: 0 auto;
}

.positionVisible {
  visibility: visible;
}
.positionVisibleHidden {
  visibility: hidden;
}

.default-box {
  .aside-menu {
    height: 100vh;
    border-right: none;
    font-weight: 300;
    position: relative;
    z-index: 2;
    background: @themeBlueWeight;
    display: flex;
    flex-direction: column;
    .el-icon-arrow-down:before {
      color: #fff;
    }
    .is-opened {
      .el-menu--inline {
        box-shadow: inset 0 2px 8px 0 rgba(0, 0, 0, 0.45);
      }
      .el-menu-item {
        color: #fff !important;
        background: #244288 !important;
        &:hover {
          color: #fff !important;
          background: #193272 !important;
        }
      }
      .el-menu-item.is-active {
        &:hover {
          color: #fff !important;
          background: #4d84ff !important;
        }
      }
    }

    /* transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); */

    /* transition-duration: .3s; */
    // box-shadow: 1px 0 6px rgba(0, 21, 41, 0.35);

    // 子菜单
    .el-menu--vertical {
      .el-menu-item,
      .el-submenu__title {
        height: @menu-height;
        line-height: @menu-height;
      }

      .iconfont {
        display: none;
      }
    }
    // 未折叠
    &:not(.el-menu--collapse) {
      min-width: 184px;

      [class*='icon'] {
        font-size: @defaultFontSize;
        margin-right: 5px;
      }
      .iconpc-menu_cwzl1x:before {
        content: '\e626';
        font-size: 16px;
      }

      .iconpc-menu_qyryqzsq1x:before {
        content: '\e624';
        font-size: 16px;
      }

      .iconpc-menu_jtygqzsq1x:before {
        content: '\e623';
        font-size: 16px;
      }

      .iconpc-menu_grdzqzrz1x:before {
        content: '\e620';
        font-size: 16px;
      }

      .iconpc-menu_qydzqzrz1x:before {
        content: '\e621';
        font-size: 16px;
      }

      .iconpc-menu_home1x:before {
        content: '\e61d';
        font-size: 16px;
      }

      .iconpc-menu_qyrz1x:before {
        content: '\e61e';
        font-size: 16px;
      }

      .iconpc-menu_jrqy1x:before {
        content: '\e61f';
        font-size: 16px;
      }
    }

    .el-icon-sort {
      transform: rotate(-90deg);
    }

    // 折叠
    &.el-menu--collapse {
      min-width: 64px;

      .logo-text {
        opacity: 0;
      }

      // 没有子菜单
      .el-tooltip {
        [class*='icon'] {
          font-size: @strongFontSize;
          margin: 0;
        }
      }

      // 有子菜单
      .el-submenu__title {
        .sub-menu-title,
        .el-submenu__icon-arrow {
          display: none;
        }

        [class*='icon'] {
          font-size: @strongFontSize;
          margin: 0;
        }
      }
    }

    // dropdown
    .el-dropdown-link {
      cursor: pointer;
      color: #409eff;
    }

    .el-icon-arrow-down {
      font-size: 12px;
    }

    // aside-menu
    .logo {
      height: @header-height;
      background: #fff;
      overflow: hidden;
      line-height: @header-height;
      text-align: center;
      // cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      .logo-icon {
        color: #fff;
        font-size: 44px;
      }

      .logo-text {
        display: inline-block;
        color: #fff;
        vertical-align: top;
        font-size: @strongFontSize;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .default-logo {
        width: 163px;
        height: 29px;
      }
      .logo-img {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        img {
          height: 34px;
        }
      }
    }

    .menuList-box {
      flex: 1;
      overflow: auto;
      .sys-children {
        height: 50px;
        padding: 0 16px;
        font-size: 16px;
        font-weight: 500;
        line-height: 50px;
        // border-bottom: 1px solid #3d4d69;
        color: #fff;
      }
    }

    .menuList-flag {
      height: 49px;
      // border-top: 1px solid #666;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      .iconpc-menu_ss1x:before {
        color: #fff;
      }

      .icon-collapse {
        font-size: 14px;
        color: #666;

        &.active {
          transform: rotate(180deg);
        }
      }
    }

    .el-submenu__title {
      height: @menu-height;
      line-height: @menu-height;
      color: #fff !important;
    }

    .el-menu-item {
      height: @menu-height;
      line-height: @menu-height;
      color: #fff !important;
      &:hover {
        color: #fff !important;
        background-color: @themeBlue;

        /* background: menu-bg; */
      }

      &.is-active {
        color: #fff;
        background: @primary-color !important;
      }
    }
  }

  .main-container {
    background-color: #f4f7fa;
    height: 100vh;
    position: relative;

    .nav-box-header {
      background-color: #fff !important;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
      padding-left: 0;

      .header-tab {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: @header-height;
        overflow: hidden;
        width: auto;

        .tab-item {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          width: 100px;
          height: 100%;
          cursor: pointer;
          border-top: 3px solid transparent;
          &:hover {
            border-top: 3px solid #4d84ff;
            background: #e6edff;
          }

          .item-font {
            box-sizing: border-box;
            color: #666;
            height: 100%;
            display: flex;
            align-items: center;
          }

          &.active {
            background: #e6edff;
            border-top: 3px solid #4d84ff;
            .item-font {
              color: #4d84ff;
              font-weight: bold;
            }
          }
        }
      }

      .slideBtn {
        list-style: none;
        color: #666;
        height: @header-height;
        cursor: pointer;
        display: flex;
        width: 56px;
        align-items: center;
        justify-content: space-evenly;
        background: #e6edff;
        > div {
          display: flex;
          align-items: center;
          height: 100%;
          img {
            width: 24px;
            height: 24px;
          }
        }
      }

      .user-info {
        height: @header-height;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #333;
        text-align: right;
        overflow: hidden;

        .el-input__inner {
          border: none;
          background: transparent;
          color: #333;
        }
        .el-select .el-input .el-select__caret {
          color: #333;
        }

        .el-dropdown-link {
          cursor: pointer;
        }

        .position {
          display: flex;
          align-items: center;
          margin-right: 15px;
          .positionInfo {
            display: flex;
            flex-direction: column;
          }
          .iconxiazaimoren1x {
            font-size: 23px;
          }
          .iconxiazaimoren1x:hover {
            font-size: 23px;
            color: #4d84ff;
          }
        }

        .switch {
          .el-switch__label {
            color: #fff;
          }
        }

        .info-company {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          margin: 0 30px 0 20px;
        }

        .icon-group {
          width: 140px;
          display: flex;
          justify-content: space-evenly;

          .icon-btn {
            cursor: pointer;
          }
        }

        .el-dropdown {
          color: #333;
          flex-shrink: 0;
        }
      }
    }

    .nav-breadcrumb {
      padding: 0 16px;
      background-color: #fff;
      line-height: 40px;
      border-top: 1px solid @cutOffRuleColor;
      border-bottom: 1px solid @cutOffRuleColor;
      z-index: 1;

      .breadcrumb-content {
        display: flex;
        align-items: center;

        .tab-box {
          margin-right: 10px;
          cursor: pointer;
        }
      }

      .el-breadcrumb {
        height: 40px;
        display: flex;
        margin-right: 20px;
        align-items: center;

        .nav-row {
          height: 100%;

          .lastItem {
            .el-breadcrumb__inner {
              color: @themeBlue;
            }
          }
        }
      }
    }
    // main
    .nuxt-main {
      position: absolute;
      top: 90px;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: auto;
      padding: 10px;
      background: #f4f7fa;
      .nuxt-content {
        // min-height: calc(~"100% - 40px");
        min-height: 100%;
        overflow: auto;
        background-color: #fff;
        position: relative;

        > div {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: 8px;
          background-color: #fff;
        }
      }
    }
  }
  .service-box {
    .el-dropdown-link {
      padding: 8px 5px;
      text-align: center;
      display: flex;
      flex-direction: column;
      background: #85aafd;
      border-radius: 5px;
      box-shadow: 0 0 5px 0 #85aafd;
      .service-bg-pic {
        background: url('../m-front-common/pc/assets/img/kefuimg@2x.png')
          no-repeat;
        background-size: auto 100%;
        background-position: center 0px;
        border-radius: 0%;
        width: 70px;
        height: 60px;
      }
      .service-text-pad {
        font-size: 16px;
        color: #ffffff;
        padding-top: 8px;
        white-space: nowrap;
        font-weight: 600;
      }
    }
    .dropdown-list {
      background: white;
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid #e6e6e6;
      border-radius: 3px;
      box-shadow: 0 1px 6px rgba(0, 21, 41, 20%);

      .triangle-box {
        width: 14px;
        height: 14px;
        box-sizing: border-box;
        background: white;
        border-top: 1px solid #e6e6e6;
        border-right: 1px solid #e6e6e6;
        border-radius: 3px;
        transform: rotate(45deg);
        position: absolute;
        right: -7px;
        top: 28px;
        z-index: -1;
      }
      .dropdown-list-main {
        padding: 10px 0;
        > p {
          font-size: 14px;
          white-space: nowrap;
          position: relative;
          z-index: 2;
          font-size: 14px;
          height: 36px;
          display: flex;
          align-items: center;
          z-index: 10;
          color: #333333;
          > span {
            box-sizing: content-box;
            padding: 8px 23px 8px 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        > p:hover {
          background: #f5f8ff;
          color: #4d84ff;
        }
      }
      .dropdown-list-mains {
        padding: 15px 5px 2px 15px;
        display: flex;
        flex-wrap: wrap;
        box-sizing: content-box;
        .dropdown-list-mains-p {
          box-sizing: content-box;
          width: 110px;
          height: 20px;
          line-height: 20px;
          font-size: 14px;
          color: #333333;
          padding: 8px 10px;
          margin: 0px 10px 13px 0px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .dropdown-list-mains-p:hover {
          background: #f5f8ff;
          color: #4d84ff;
        }
      }
    }
  }
}
</style>
